<template>
  <div class="app-container">
    <div class="item-content">
      <personal :userInfo="userInfo" />
      <div v-if='device == "pad"'>
        <el-tabs v-model="activeName" @tab-click="handleClick" :key="updateKey">
          <el-tab-pane
            v-for="item in tabList"
            :key='item.name'
            :label="item.label"
            :name="item.name"
          >
            <div class="item" slot="label">
              <span class="tab-name">{{item.label}}</span>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>

      <!-- 任务 --><!-- 异常告警 -->
      <template v-if='device == "desktop"'>
        <taskItem :userInfo="userInfo" :key="taskKey"/>
        <abnormalItem :userInfo="userInfo" :key="abnormalKey"/>
      </template>

      <template v-if='device == "pad" && activeName == 1'>
        <taskItemNomalPad :userInfo="userInfo" :key="nomalPadKey"/>
        <abnormalItem :userInfo="userInfo" :key="abnormalKey"/>
        <taskItemImproveIPad :key="improvePadKey"/>
      </template>

      <template v-if='device == "desktop" || device == "pad" && activeName == 2'>
        <attentionItem v-if='userInfo' :userInfo="userInfo" :key="attentionKey"/>
      </template>

      <template v-if='device == "desktop" || device == "pad" && activeName == 3'>
        <deviceItem v-if='userInfo' :userInfo="userInfo" :key="deviceKey"/>
      </template>
      <!-- <fixedTool :userInfo="userInfo" @HandleWorkLog="HandleWorkLog"/> -->
    </div>
  </div>
</template>
<script>
  import { mapState,mapActions,mapMutations } from "vuex";
  import personal from "./components/personal";
  import abnormalItem from "./components/abnormalItem";
  import taskItem from "./components/taskItem";
  import taskItemNomalPad from "./components/taskItemNomalPad";
  import taskItemImproveIPad from "./components/taskItemImproveIPad";
  import attentionItem from "./components/attentionItem";
  import deviceItem from "./components/deviceItem";
  import fixedTool from "./components/fixedTool";
  import {workUserInfo} from "@/api/workbench/index";
  import {setData} from '@/utils/auth'
export default {
  components: {personal,abnormalItem,taskItem,taskItemNomalPad,taskItemImproveIPad,attentionItem,deviceItem,fixedTool},
  dicts: ["PostManage"],
  data() {
    return {
      loading: false,
      workLogDialog: {
        visible: false,
        defaultValues: []
      },
      userInfo:{},
      updateKey:1,
      abnormalKey:2,
      taskKey:3,
      attentionKey:4,
      deviceKey:5,
      nomalPadKey:6,
      improvePadKey:7,
      activeName:"1",
      tabList:[
        {label:"待办事项",name:"1"},
        {label:"核心关注",name:"2"},
        {label:"设备监控 ",name:"3"}
      ],
      refreshTimer:null
    };
  },

  // provide(){
  //   return{
  //     userInfo:this.userInfo
  //   }
  // },

  computed: {
    ...mapState({
      device: (state) => state.app.device
    })
  },

  created() {
    this.getUserInfo();
    setTimeout(() => {
      this.setRefreshTimer()
    }, 1000);
  },

  methods: {
    setRefreshTimer(){
      if (this.refreshTimer) {
        clearTimeout(this.refreshTimer);
      }
      this.refreshTimer = setTimeout(() => {
        this.getUserInfo();
        this.setRefreshTimer();
      },60000)
    },

    getUserInfo(){
      this.loading = true;
      workUserInfo()
      .then((res) => {
        if(res.code == 200 && res?.data){
          if(JSON.stringify(res?.data) !== JSON.stringify(this.userInfo)){
            this.userInfo = res?.data || {};
          }
        }
      })
      .catch(() => {
        this.userInfo = {};
        this.loading = false;
      });
    },

    handleClick(tab, event) {
      this.activeName = tab.name;
    }
  },

  beforeDestroy(){
    if (this.refreshTimer) {
      clearTimeout(this.refreshTimer);
    }
  },
  destroyed(){
    if (this.refreshTimer) {
      clearTimeout(this.refreshTimer);
    }
  }
};
</script>
<style lang="scss" scoped>
.item-content{
  display:flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  .el-tabs{
    width: 100%;
    .tab-name{
      font-weight: bold;
    }
  }
}
.item-content .box-card:not(:last-child){
  margin-bottom: 8px;
}
</style>
